/* switch
*/
.el-switch {
  --el-switch-off-color: var(--surface-neutral-tertiary-rest);
  .el-switch__core {
    height: 18px;
    border-radius: 999px;
    .el-switch__action {
      left: 0;
    }
  }
  &.is-checked {
    .el-switch__core {
      .el-switch__action {
        left: calc(100% - 16px);
      }
    }
  }
  &.is-disabled {
    --el-switch-on-color: var(--surface-filled-disabled);
    --el-switch-off-color: var(--surface-neutral-tertiary-disabled);
    opacity: 1;
  }
}

.el-switch--small {
  .el-switch__core {
    height: 16px;
    .el-switch__action {
      left: 1px;
    }
  }
  &.is-checked {
    .el-switch__core {
      .el-switch__action {
        left: calc(100% - 13px);
      }
    }
  }
}

.el-switch--large {
  .el-switch__core {
    min-width: 52px;
    height: 32px;
    .el-switch__action {
      left: 3px;
      width: 24px;
      height: 24px;
    }
  }
  &.is-checked {
    .el-switch__core {
      .el-switch__action {
        left: calc(100% - 27px);
      }
    }
  }
}

.el-switch__input:focus-visible ~ .el-switch__core {
  outline-color: var(--stroke-border-cta-focused);
}
